<template>
	<view>
		<view class="mx-1">
			<uni-easyinput prefixIcon="search" v-model="searchvalue" placeholder="请输入搜索内容" @iconClick="iconClick" @blur="blurSearch">
			</uni-easyinput>
		</view>
		<view class="hot-search">
			<one-adv title="热门搜索" cover="../../static/images/demo/demo4.jpg">
				<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click.native="inputSearch(item)"></color-tag>
			</one-adv>
		</view>
		<view class="cate-search">
			<one-adv title="常用分类">
				<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click.native="inputSearch(item)"></color-tag>
			</one-adv>
		</view>
		<view class="history-search">
			<one-adv title="历史记录" cover="../../static/images/demo/del.png" :del="true" @clearHistory="clearHistoryList">
				<color-tag v-for="(item,i) in historyList" :key="i" @click.native="inputSearch(item)" :item="{name:item}" :color="false" @longpress="longPress(i)">
					 <icon type="clear" size="16" v-if="currentIndex==i&isShow" class="position-absolute clear-icon" @click="removeItem(i)"/>
				</color-tag>
			</one-adv>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex:0,
				isShow:false,
				historyList:[],
				searchvalue: '',
				hot:[{
					name: '领券中心'
				},
				{
					name: 'Redmi K20'
				},
				{
					name: 'RedmiBook 14'
				},
				{
					name: '智能积木 越野四驱车'
				},
				{
					name: '手环 腕带'
				},
				],
				cate:[{
				
					name: '耳机'
				},
				{
					name: '手机'
				},
				{
					name: '音箱'
				},
				{
					name: '手表'
				},
				{
					name: '配件'
				},
				{
					name: '网关/传感器'
				},
				{
					name: '健康'
				},
				{
					name: '酷玩'
				},
				]
			}
		},
		mounted() {
				const value = uni.getStorageSync('history_key');
				if (value) {
					this.historyList = value
				}
		},
		methods: {
			longPress(index){
				this.currentIndex = index;
				console.log('2222',this.currentIndex);
				this.isShow = true
			},
			removeItem(i){
				this.historyList.splice(i,1)
				uni.setStorageSync('history_key', this.historyList);
				this.isShow = false
			},
			clearHistoryList(){
				uni.showModal({
					title: '提示',
					content: '您确定要全部删除吗',
					success:  (res)=> {
						if (res.confirm) {
							this.historyList = []
							uni.removeStorageSync('history_key');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			inputSearch(item){
				if(item.name){
					this.searchvalue = item.name
				}else {
					this.searchvalue = item
				}
				
			},
			//点击左侧图标
			iconClick() {
				let index =this.historyList.indexOf(this.searchvalue)
				if(index == -1){
					//原来的historyList是空的或者有东西但是搜索的时候不是原来的某个数据
					this.historyList.unshift(this.searchvalue)
					uni.setStorageSync('history_key', this.historyList);
				}else {
					//historyList里面有东西但是有重复搜索了
					this.historyList.splice(index,1)
					this.historyList.unshift(this.searchvalue)
					uni.setStorageSync('history_key', this.historyList);
				}
				uni.navigateTo({
					url:`/pages/choose/choose?key=${this.searchvalue}`
				})
				
				
			},
			//失去焦点清除空格
			blurSearch(){
				this.searchvalue = this.searchvalue.trim()
			}
		}
	}
</script>

<style scoped>
	.uni-mt-5 {
		margin-top: 5px;
	}
	.clear-icon {
		top:0;
		right:0;
	}
</style>